<template>
	<div style="display: flex;">
		<el-container style="height: 100vh">
			<el-menu default-active="1" @select='selectINdex' active-text-color='#ffffff' class="el-menu-vertical-demo"
				style="background-color: rgb(138,156,232); height: 90%;overflow-x: hidden">
				<div style="height: 60px;line-height: 60px;text-align: center">
					<b style="color:black" v-show="logoTextShow">实验室管理</b>
				</div>
				<el-menu-item index="1">
					<el-icon>
						<House />
					</el-icon>
					<span>器材列表</span>
				</el-menu-item>
				<el-menu-item index="3">
					<el-icon>
						<document />
					</el-icon>
					<span>器材损坏记录</span>
				</el-menu-item>
				<el-menu-item index="2">
					<el-icon>
						<Edit />
					</el-icon>
					<span>器材库存记录</span>
				</el-menu-item>
				
				<el-menu-item index="4">
					<el-icon>
						<setting />
					</el-icon>
					<span>实验室列表</span>
				</el-menu-item>
				<el-menu-item index="5">
					<el-icon>
						<setting />
					</el-icon>
					<span>实验室预定记录</span>
				</el-menu-item>
			</el-menu>
		</el-container>
		<el-main>
			<el-dialog :title="qcTitle" v-model="showQc" width="50%">
				<div style="display: flex;align-items: center;margin-bottom: 20px;">
					<div style="width: 80px;">器材编号：</div>
					<div><el-input type="text" v-model="qcObj.equipmentNo" :readonly="qcType!='add'"/></div>
				</div>
				<div style="display: flex;align-items: center;margin-bottom: 20px;">
					<div style="width: 80px;">器材名称：</div>
					<div><el-input type="text" v-model="qcObj.equipmentName" :readonly="qcType!='add'"/></div>
				</div>
				<div style="display: flex;align-items: center;margin-bottom: 20px;" v-if="qcType!='add'">
					<div style="width: 80px;">状态:</div>
					<div>
						{{qcObj.equipmentStatus==0?"损坏":"正常"}}
					</div>
				</div>
				<div style="display: flex;align-items: center;margin-bottom: 20px;">
					<div style="width: 80px;">描述:</div>
					<div><el-input type="textarea" v-model="qcObj.usageDesc" :readonly="qcType=='view'"/></div>
				</div>
				<div slot="footer" class="dialog-footer" v-if="qcType=='edit'||qcType=='add'"
					style="margin-top: 20px;display: flex;align-items: center;justify-content: center;">
					<el-button @click="showQc = false">取 消</el-button>
					<el-button type="primary" @click="confirmQcTime">确 定</el-button>
				</div>
			</el-dialog>	
			<el-card class="box-card" v-if="indexSel==1">
				<template #header>
					<div class="card-header">
						<el-input v-model="keyWord" placeholder="请输入器材名称" style="width: 200px;margin-right: 20px;" />
						<el-button type="primary" @click="currentPage=1,tableData.length=0,getQcList()">搜索</el-button>
						<el-button type="primary" @click="addQc">添加器材</el-button>
					</div>
				</template>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="equipmentNo" label="编号" align="center" />
					<el-table-column prop="equipmentName" label="名称" align="center" />
					<el-table-column prop="equipmentStatus" label="状态" align="center" >
						<template v-slot="scope">
							{{scope.row.equipmentStatus==0?"损坏":"正常"}}
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center">
						<template v-slot="scope">
							<el-button type="primary" @click="showQcPick(scope.row,'view')">查看</el-button>
							<el-button type="success" @click="showQcPick(scope.row,'edit')">更新</el-button>
							<el-button v-if="scope.row.equipmentStatus==0" type="success" @click="showAddDemang(scope.row)">添加损坏记录</el-button>
							<el-button type="danger" @click="delQcPick(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination style="margin-top: 20px;" background layout="prev, pager, next" :total="total"
					@current-change='currentChange' :page-size="5">
				</el-pagination>
			</el-card>
			<el-card class="box-card" v-if="indexSel==2">
				<template #header>
					<div class="card-header">
						<el-input v-model="keyWord" placeholder="请输入器材名称" style="width: 200px;margin-right: 20px;" />
						<el-button type="primary" @click="currentPage=1,tableData.length=0,kcDamage()">搜索</el-button>
					</div>
				</template>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="equipmentName" label="器材名称" align="center" />
					<el-table-column prop="equipmentInventory" label="库存" align="center" />
				</el-table>
			</el-card>
			<el-card class="box-card" v-if="indexSel==3">
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="equipmentId" label="器材ID" align="center" />
					<el-table-column prop="equipmentNo" label="器材编号" align="center" />
					<el-table-column prop="createTime" label="创建时间" align="center" >
						<template v-slot="scope">
							{{scope.row.createTime.slice(0,3).join('-')}}&nbsp;&nbsp;
							{{scope.row.createTime.slice(3,5).join(':')}}0
						</template>
					</el-table-column>
					<el-table-column prop="damageStatus" label="状态" align="center" >
						<template v-slot="scope">
							{{scope.row.damageStatus==0?"待处理":scope.row.damageStatus==1?"修理中":scope.row.damageStatus==2?"无法修理":"修理完成"}}
						</template>
					</el-table-column>
					<el-table-column prop="content" label="内容" align="center" />
					<el-table-column label="操作" align="center">
						<template v-slot="scope">
							<el-button type="primary" @click="showQcDemang(scope.row)">修改</el-button>
							<el-button type="danger" @click="delQcDemang(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
			<el-card class="box-card" v-if="indexSel==4">
				<template #header>
					<div class="card-header">
						<el-input v-model="keyWord" placeholder="请输入实验室名称" style="width: 200px;margin-right: 20px;" />
						<el-button type="primary" @click="currentPage=1,tableData.length=0,getlaboratoryList()">搜索</el-button>
						<el-button type="primary" @click="showAddLabratory()">添加实验室</el-button>
					</div>
				</template>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="laboratoryNo" label="编号" align="center" />
					<el-table-column prop="laboratoryName" label="名称" align="center" />
					<el-table-column prop="location" label="地点" align="center" />
					<el-table-column prop="createTime" label="创建时间" align="center" >
						<template v-slot="scope">
							{{scope.row.createTime.slice(0,3).join('-')}}&nbsp;&nbsp;
							{{scope.row.createTime.slice(3,5).join(':')}}0
						</template>
					</el-table-column>
					<el-table-column prop="caozuo" label="操作" align="center">
						<template v-slot="scope">
						<el-button type="primary"  @click="showSeatInfo(scope.row)">预订</el-button>
						<el-button type="success" @click="editLabortory(scope.row)">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
			<el-card class="box-card" v-if="indexSel==5">
				<template #header>
					<div class="card-header">
						<el-input v-model="keyWord" placeholder="请输入关键词" style="width: 200px;margin-right: 20px;" />
						<el-button type="primary"
							@click="currentPage=1,tableData.length=0,getSeatReserveList()">搜索</el-button>
			<span style="font-size: 16px; color: #336699;margin-left: 20px;margin-top: 5px">超时提醒：请注意预定时间，不要超时</span>
					</div>
				</template>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="laboratoryNo" label="实验室编号" align="center" />
					<el-table-column prop="laboratoryName" label="实验室名称" align="center" />
					<el-table-column label="开始时间" align="center">
						<template v-slot="scope">
							{{scope.row.beginTime.slice(0,3).join('-')}}&nbsp;&nbsp;
							{{scope.row.beginTime.slice(3,5).join(':')}}0
						</template>
					</el-table-column>
					<el-table-column label="结束时间" align="center">
						<template v-slot="scope">
							{{scope.row.endTime.slice(0,3).join('-')}}&nbsp;&nbsp;
							{{scope.row.endTime.slice(3,5).join(':')}}0
						</template>
					</el-table-column>
					<el-table-column prop="reserveMinutes" label="预定时长(分钟)" align="center" />
					<el-table-column prop="caozuo" label="操作" align="center">
						<template v-slot="scope">
							<el-button type="danger" @click="delReserve(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</el-main>
		<el-dialog
		    v-model="laboratoryDialog"
		    :title="laboratoryTitle"
		    width="400px"
		  >
		  <view class="form" style="display: flex;flex-direction: column;align-items: center;">
			<div style="display: flex;align-items: center;margin-bottom: 20px;">
				<div style="width: 100px;">实验室编号：</div>
				<div><el-input type="text" v-model="laboratoryObj.laboratoryNo" /></div>
			</div>
			<div style="display: flex;align-items: center;margin-bottom: 20px;">
				<div style="width: 100px;">实验室名称：</div>
				<div><el-input type="text" v-model="laboratoryObj.laboratoryName" /></div>
			</div>
			<div style="display: flex;align-items: center;margin-bottom: 20px;">
				<div style="width: 100px;">地点:</div>
				<div><el-input type="text" v-model="laboratoryObj.location" /></div>
			</div>
			<div style="margin-top: 20px;">
				 <el-button type="primary" @click="addLaboratoryItem">提交</el-button>
				  <el-button @click="laboratoryDialog=false" plain>取消</el-button>
			</div>
		  </view>
		  </el-dialog>
		<el-dialog
		    v-model="dialogVisible"
		    title="器材损坏报备"
		    width="400px"
		  >
		  <view class="form" style="display: flex;flex-direction: column;align-items: center;">
			<view class="form-item" style="display: flex;
			align-items: center;margin-top: 10px;">
				损坏原因：
				<el-input
				style="width: 250px;"
				  type="textarea"
				  :rows="2"
				  placeholder="请输入内容"
				  v-model="demangContent">
				</el-input>
			</view>
			<div style="margin-top: 20px;">
				 <el-button type="primary" @click="addDemang">提交</el-button>
				  <el-button @click="dialogVisible=false" plain>取消</el-button>
			</div>
		  </view>
		  </el-dialog>
		  <el-dialog
		      v-model="dialogVisibleDemange"
		      title="修改器材损坏状态"
		      width="400px"
		    >
		    <view class="form" style="display: flex;flex-direction: column;align-items: center;">
		  	<view class="form-item" style="display: flex;
		  	align-items: center;margin-top: 10px;">
				状态：
		  		 <el-radio-group v-model="editDemangObj.damageStatus" style="width: 80%;">
		  		    <el-radio :label="0">待处理</el-radio>
		  		    <el-radio :label="1">修理中</el-radio>
		  		    <el-radio :label="2">无法修理</el-radio>
					<el-radio :label="3">修理完成</el-radio>
		  		  </el-radio-group>
		  	</view>
		  	<div style="margin-top: 20px;">
		  		 <el-button type="primary" @click="addDemangStatus">提交</el-button>
		  		  <el-button @click="dialogVisibleDemange=false" plain>取消</el-button>
		  	</div>
		    </view>
		    </el-dialog>
			<el-dialog title="选择座位预定时间" v-model="seatPick" width="50%">
				<div style="display: flex;flex-direction: column;;justify-content: center;width: 100%;">
					<div style="color: #ff0000;margin-bottom: 10px;font-size: 12px;">*只显示可预约时间</div>
					<el-select v-model="seatData" @change='changeSeatTime' multiple placeholder="请选择" style="width: 100%;">
						<el-option v-for="item in seatTimeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div slot="footer" class="dialog-footer"
					style="margin-top: 20px;display: flex;align-items: center;justify-content: center;">
					<el-button @click="seatPick = false">取 消</el-button>
					<el-button type="primary" @click="confirmSeatTime">确 定</el-button>
				</div>
			</el-dialog>
	</div>
</template>


<script setup lang="ts">
	import { ElMessage, ElMessageBox } from "element-plus";
	import {
		qcList,
		addQcEquipment,
		delEquipment,
		updateEquipment,
		qcDamageList,
		addQcDamage,
		delDamageEquipment,
		editQcDamage,
		qcDamageInventory,
		laboratoryList,
		addLaboratory,
		updateLaboratory,
		listReserveByLab,
		addLabortoryReserve,
		getLabortoryReserve,
		delLabortoryReserve
	} from '@/api/Forth/index.js'
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import Aside from "../../components/Second/Aside.vue";
	import CourseContent from "../../components/Second/CourseContent.vue";
	const logoTextShow : Ref<boolean> = ref(true);
	const indexSel: Ref < number >= ref(1);
	
	const dialogVisible:Ref<boolean>=ref(false)
	const tableData = reactive([
		{}
	])
	onMounted(() => {
		getFunByIndexSel()
	})
	const total : Ref<number> = ref(0);
	const currentPage : Ref<number> = ref(1);
	const keyWord : Ref<string> = ref('');
	const textarea: Ref<string> = ref('');
	function selectINdex(e : any) {
		currentPage.value = 1
		indexSel.value = e
		tableData.length = 0
		keyWord.value = ''
		getFunByIndexSel()
	}
	function getFunByIndexSel() {
		if (indexSel.value == 1) {
			getQcList()
		} else if (indexSel.value == 2) {
			kcDamage()
		} else if (indexSel.value == 3) {
			qcDamage()
		} else if (indexSel.value == 4) {
			getlaboratoryList()
		}else if(indexSel.value == 5){
			getSeatReserveList()
		}
	}
	// 分页
	function currentChange(e : number | string) {
		currentPage.value = e
		getFunByIndexSel()
	}
	//获取器材列表
	const qcTitle: Ref<string> = ref('查看器材');
	const showQc: Ref<boolean> = ref(false);
	const qcType: Ref<string> = ref("");
	const qcObj:{
		equipmentName?:string,
		equipmentStatus?:string|number,
		equipmentNo?:string,
		usageDesc?:string
	}=reactive({});
	function getQcList(){
		let query : any = {
			pageNum: currentPage.value,
			pageSize: 5,
		}
		if (keyWord.value) {
			query.word = keyWord.value
		}
		qcList(query).then((res : any) => {
			total.value = res.data.data.total
			tableData.length = 0
			tableData.push(...res.data.data.records)
		})
	}
	//查看更新器材弹窗
	function showQcPick(obj:object,type:string){
		qcType.value = type
		qcTitle.value = type=='view'?"查看器材":"更新器材"
		showQc.value=true
		Object.assign(qcObj,obj)
	}
	//添加器材弹窗
	function addQc(){
		qcType.value = 'add'
		qcTitle.value = "添加器材"
		showQc.value=true
		Object.assign(qcObj,{})
	}
	//确认添加器材
	function confirmQcTime(){
		console.log(qcObj);
		if(qcObj.id){
			updateEquipment({id:qcObj.id,usageDesc:qcObj.usageDesc}).then((res:any)=>{
				showQc.value = false
				ElMessage({ message: res.data.message, type: res.data.status==500?'error':'success', showClose: true })
				qcList()
			})
		}else{
			addQcEquipment(qcObj).then((res:any)=>{
				showQc.value = false
				ElMessage({ message: res.data.message, type: res.data.status==500?'error':'success', showClose: true })
				qcList()
			})
		}
	}
	//删除 器材
	function delQcPick(obj:object){
		ElMessageBox.confirm(
			'此操作将删除这条记录，请确认是否删除',
			'Warning',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			delEquipment({ equipmentId: obj.id }).then((res : any) => {
				ElMessage({ message: res.data.message, type: 'success', showClose: true })
				qcList()
			})
		})
	}
	//添加损坏记录
	const demangObj=reactive({});
	const demangContent: Ref<string> = ref("");
	function showAddDemang(obj:any){
		Object.assign(demangObj,obj)
		dialogVisible.value = true
	}
	function addDemang(){
		if(!demangContent.value) return ElMessage({ message:'损坏原因不能为空', type: 'error', showClose: true })
		addQcDamage({
			userId:1,
			equipmentId:demangObj.id,
			equipmentNo:demangObj.equipmentNo,
			content:demangContent.value,
		}).then((res:any)=>{
			dialogVisible.value = false
			ElMessage({ message: res.data.message, type: res.data.status==500?'error':'success', showClose: true })
			qcList()
		})
	}
	//获取器材损坏记录列表
	function qcDamage(){
		let query : any = {
			pageNum: currentPage.value,
			pageSize: 5,
		}
		if (keyWord.value) {
			query.word = keyWord.value
		}
		qcDamageList(query).then((res : any) => {
			total.value = res.data.data.total
			tableData.length = 0
			console.log(res.data.data.records);
			tableData.push(...res.data.data.records)
		})
	}
	//删除损坏记录
	function delQcDemang(obj:any){
		ElMessageBox.confirm(
			'此操作将删除这条记录，请确认是否删除',
			'Warning',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			delDamageEquipment({ damageId: obj.id }).then((res : any) => {
				ElMessage({ message: res.data.message, type: 'success', showClose: true })
				qcDamage()
			})
		})
	}
	//修改损坏状态
	const dialogVisibleDemange:Ref<boolean>=ref(false);
	const editDemangObj=reactive({})
	function showQcDemang(obj:any){
		dialogVisibleDemange.value =true
		Object.assign(editDemangObj,obj)
	}
	function addDemangStatus(){
		editQcDamage({ id: editDemangObj.id,damageStatus:editDemangObj.damageStatus }).then((res : any) => {
			dialogVisibleDemange.value =false
			ElMessage({ message: res.data.message, type: 'success', showClose: true })
			qcDamage()
		})
	}
	//器材库存记录
	function kcDamage(){
		let query : any = {
			pageNum: currentPage.value,
			pageSize: 5,
		}
		if (keyWord.value) {
			query.word = keyWord.value
		}
		qcDamageInventory(query).then((res : any) => {
			total.value = res.data.data.total
			tableData.length = 0
			console.log(res.data.data.records);
			tableData.push(...res.data.data.records)
		})
	}
	//获取实验室列表
	function getlaboratoryList(){
		let query : any = {
			pageNum: currentPage.value,
			pageSize: 5,
		}
		if (keyWord.value) {
			query.word = keyWord.value
		}
		laboratoryList(query).then((res : any) => {
			total.value = res.data.data.total
			tableData.length = 0
			console.log(res.data.data.records);
			tableData.push(...res.data.data.records)
		})
	}
	//添加实验室
	const laboratoryDialog:Ref<boolean>=ref(false);
	const laboratoryTitle:Ref<string> = ref('添加实验室');
	const laboratoryObj=reactive({})
	function showAddLabratory(){
		laboratoryDialog.value=true
	}
	function addLaboratoryItem(){
		if(!laboratoryObj.laboratoryNo||!laboratoryObj.laboratoryName||!laboratoryObj.location){
			return 	ElMessage({ message:'实验室信息未完善', type: 'error', showClose: true })
		}
		if(laboratoryTitle.value=='添加实验室'){
			addLaboratory({
				laboratoryNo: laboratoryObj.laboratoryNo,
				laboratoryName:laboratoryObj.laboratoryName ,
				location:laboratoryObj.location ,
				}).then((res : any) => {
				laboratoryDialog.value =false
				ElMessage({ message: res.data.message, type: 'success', showClose: true })
				getlaboratoryList()
			})
		}else{
			updateLaboratory({
				id:laboratoryObj.id,
				laboratoryNo: laboratoryObj.laboratoryNo,
				laboratoryName:laboratoryObj.laboratoryName ,
				location:laboratoryObj.location ,
				}).then((res : any) => {
				laboratoryDialog.value =false
				ElMessage({ message: res.data.message, type: 'success', showClose: true })
				getlaboratoryList()
			})
		}
		
	}
	//修改实验室
	function editLabortory(obj:any){
		laboratoryTitle.value='修改实验室'
		laboratoryDialog.value=true
		Object.assign(laboratoryObj,obj)
	}
	// 预订实验室
	const selSeatObj:any = reactive({});
	const seatPick : Ref<boolean> = ref(false);
	const seatData :Ref<string> =  ref('');
	const isContinuityArr:Ref<boolean> = ref(true)
	function showSeatInfo(row : any) {
		Object.assign(selSeatObj, row)
		seatData.value = ''
		isContinuityArr.value=true
		listReserveByLab({ seatId: row.id }).then((res : any) => {
			let data = res.data.data;
			for (let i = 0; i < data.length; i++) {
				if(data[i].status==1){
					seatTimeList.splice(i,1)
				}
			}
			seatPick.value = true
		})
	}
	const isContinuityNum = (num: number[] | number) => {
	  let array = [];
	  if (num instanceof Array) {
	    array = [...num];
	  } else {
	    array = Array.from(num.toString()); //转换为数组
	  }
	
	  let i = array[0];
	  let isContinuation = true;
	  for (let e in array) {
	    if (array[e] != i) {
	      isContinuation = false;
	      break;
	    }
	    i++;
	  }
	  return isContinuation;
	};
	function changeSeatTime(e:any){
		console.log(e);
		isContinuityArr.value = isContinuityNum(e.sort((a,b) => a-b))
		if(!isContinuityNum(e.sort((a,b) => a-b))){
			ElMessage({ message:'请选择连续的时间段', type: 'error', showClose: true })
		}
	}
	//确认座位预定
	const seatTimeList = reactive([
		{ label: '8:00-9:00', value: 8,disabled: false },
		{ label: '9:00-10:00', value: 9, disabled: false },
		{ label: '10:00-11:00', value: 10, disabled: false },
		{ label: '11:00-12:00', value: 11, disabled: false },
		{ label: '12:00-13:00', value: 12, disabled: false },
		{ label: '13:00-14:00', value: 13, disabled: false },
		{ label: '14:00-15:00', value: 14, disabled: false},
		{ label: '15:00-16:00', value: 15, disabled: false},
		{ label: '16:00-17:00', value: 16, disabled: false},
		{ label: '17:00-18:00', value: 17, disabled: false},
		{ label: '18:00-19:00', value: 18, disabled: false},
		{ label: '19:00-20:00', value: 19, disabled: false},
		{ label: '20:00-21:00', value: 20, disabled: false},
		{ label: '21:00-22:00', value: 21, disabled: false}])
	function confirmSeatTime() {
		let query={
			laboratoryId:selSeatObj.id,
			userId:1,
			timeString:seatData.value.join(',')
		}
		if(!seatData.value) {
			return ElMessage({ message:'请选择时间', type: 'error', showClose: true })
		}
		if(!isContinuityArr.value) {
			seatData.value = ''
			return ElMessage({ message:'请选择连续的时间段', type: 'error', showClose: true })
		}
		addLabortoryReserve(query).then((res : any) => {
			seatPick.value = false
			if(res.data.status==200){
				ElMessage({ message: res.data.message+`,您的座位预定结束时间为当天：${seatData.value[seatData.value.length-1]}点`, type: 'success', showClose: true })
			}else{
				return ElMessage({ message: res.data.message, type: 'error', showClose: true })
			}
			getlaboratoryList()
		})
	}
	// 获取座位预订记录
	function getSeatReserveList() {
		let query : any = {
			pageNum: currentPage.value,
			pageSize: 5,
			userId: 1,
			word: keyWord.value
		}
		getLabortoryReserve(query).then((res : any) => {
			total.value = res.data.data.total
			tableData.length = 0
			tableData.push(...res.data.data.records)
		})
	}
	//删除预定座位
	function delReserve(id:string) {
		ElMessageBox.confirm(
			'此操作将删除这条记录，请确认是否删除',
			'Warning',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			delLabortoryReserve({ reserveId: id }).then((res : any) => {
				ElMessage({ message: res.data.message, type: 'success', showClose: true })
				getlaboratoryList()
			})
		})
	
	}
</script>

<style scoped>
	.card-header {
		display: flex;
		justify-content: flex-start;
	}
</style>